<template>
  <t-modal :width="950" :visible="visible" :title="title" switchFullscreen @ok="handleSubmit" @cancel="close"
           style="top:50px" cancelText="关闭">
    <a-row class="t-row" :gutter="24" style="background-color: #ececec; padding: 10px; margin: -10px">
      <a-col :md="8" :sm="24">
        <a-card :bordered="false">
          <a-tree v-if="orgTree.length" showLine :load-data="onLoadData" :tree-data="orgTree"
                  @select="selectTree" default-expand-all/>
        </a-card>
      </a-col>
      <a-col :md="16" :sm="24">
        <a-card :bordered="false">
          <div class="toolbar flex justify-between flex-wrap" style="width: 100%;">
            <div class="table-page-search-wrapper">
              <a-form layout="inline">
                <div class="flex justify-between flex-wrap">
                  <a-form-item label="">
                    <a-input v-model="queryParam.positionText" placeholder="岗位名称"/>
                  </a-form-item>
                  <div class="table-page-search-submitButtons flex">
                    <a-button class="cu-btn-primary" @click="$refs.table.refresh(true)">查询
                    </a-button>
                    <a-button class="cu-btn-filter" @click="
                        () => {
                          (queryParam = {}), $refs.table.refresh();
                        }
                      ">重置
                    </a-button>
                  </div>
                </div>
              </a-form>
            </div>
          </div>
          <div class="page-common-sub-box">
            <s-table ref="table" :columns="columns" rowKey="uuid" :data="loadData" :row-selection="{
              selectedRowKeys: selectedRowKeys,
              onChange: onSelectChange,
              type: multi ? 'checkbox' : 'radio',
            }" @rowClick="rowClick" :scroll="scrollXY">
							<span slot="serial" slot-scope="text, record, index">
								{{ index + 1 }}
							</span>
              <span slot="sex" slot-scope="text">
								{{ text | sexFilter }}
							</span>
              <span slot="status" slot-scope="text">
								<a-tag :color="text === 1 || text === '1' ? 'green' : 'red'">
									{{ text === 1 || text === "1" ? "启用" : "禁用" }}
								</a-tag>
							</span>
            </s-table>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </t-modal>
</template>

<script>
  import {
    STable
  } from "@/components";

  export default {
    name: "TreeList",
    props: ["modalWidth", "multi", "userIds"],
    components: {
      STable,
    },
    data() {
      return {
        title: "用户",
        visible: false,
        confirmLoading: false,
        mdl: null,
        // 查询参数
        queryParam: {},
        queryParamList: {},
        userPost: [],
        data: [],
        // 表头
        columns: [
          {
            title: "岗位名称",
            align: "center",
            dataIndex: "positionText",
            width: 150,
          },
          {
            title: "岗位编码",
            align: "center",
            dataIndex: "positionCode",
            width: 150,
          },
          {
            title: "岗位类型",
            align: "center",
            dataIndex: "positionTypeName",
            width: 150,
          },
          {
            title: "状态",
            align: "center",
            dataIndex: "positionStatus",
            scopedSlots: {
              customRender: "positionStatus",
            },
          },
        ],
        orgTree: [],
        // 加载数据方法 必须为 Promise 对象
        loadData: (parameter) => {
          const requestParameters = Object.assign({}, parameter, this.queryParam);
          return this.$post(this.url.getUserList, requestParameters).then(
            (res) => {
              this.data = res.rows;
              return res;
            }
          );
        },
        selectedRowKeys: [],
        selectedRows: [],
        advanced: false,
        userNameId: "",
        dicUuids: "",
        info: "",
        infoUserPost: "",
        orgName: "",
        orgId: "",
        showFlag: true,
        subHeight: 0,
        url: {
          getOrgTree: "/mdata/organization/getListByLevelId?levelId=1",
          getUserList: "/mdata/sysPosition/getPageSet",
          getTreeListByPid: "/mdata/organization/getListByPid",
          // getUserListByUuids: "/mdata/user/getListByUuids",
        },
      };
    },
    computed: {
      hasSelected() {
        return this.selectedRowKeys.length > 0;
      },
      scrollXY() {
        let subHeight = this.subHeight ? this.subHeight : 500
        let height = subHeight - 40 - 40
        return {y: height};
      },
    },
    watch: {
      userIds: {
        immediate: true,
        handler() {
          // this.initUserNames();
        },
      },
    },
    filters: {
      sexFilter(sex) {
        const sexMap = {
          1: "男",
          2: "女",
        };
        return sexMap[sex];
      },
      statusFilter(status) {
        const statusMap = {
          0: "禁用",
          1: "启用",
        };
        return statusMap[status];
      },
    },
    created() {
      // 该方法触发屏幕自适应
      this.resetScreenSize();
      this.$nextTick(() => {
        this.subHeight = document.getElementsByClassName("page-common-sub-box")[0]?.clientHeight;
      })
    },
    methods: {
      initUserNames() {
        // if (this.userIds) {
        //   // 这里最后加一个 , 的原因是因为无论如何都要使用 in 查询，防止后台进行了模糊匹配，导致查询结果不准确
        //   let values = this.userIds;
        //   let selectedRowKeys = [];
        //   let realNames = [];
        //   this.$post(this.url.getUserListByUuids, {
        //     uuids: values
        //   }).then(
        //     (res) => {
        //       // 获取树形第一层级
        //       res.forEach((user) => {
        //         // if(user.uuid = )
        //         realNames.push(user.positionText);
        //         selectedRowKeys.push(user.uuid);
        //       });
        //       this.selectedRowKeys = selectedRowKeys;
        //       this.$emit("initComp", realNames.join(","));
        //     }
        //   );
        // } else {
        //   this.selectedRowKeys = [];
        //   // JSelectUserByDep组件bug issues/I16634
        //   this.$emit("initComp", "");
        // }
      },
      refreshQueryParam() {
        this.queryParam = {};
        this.queryParam = Object.assign({}, this.queryParamList);
        this.$refs.table.refresh();
      },
      showModal() {
        this.visible = true;
        this.showFlag = true;
        this.orgTree = [];
        this.queryParam = {};
        this.queryParamList = {};
        this.getData();
        if (this.$refs.table) this.$refs.table.refresh();
      },
      close() {
        this.visible = false;
      },
      handleSubmit() {
        const that = this;
        this.$emit("ok", this.selectedRows, this.selectedRowKeys.toString());
        this.close();
      },
      rowClick(record, index) {
        // 数据表格行点击事件
        this.selectedRows = [];
        this.selectedRows.push(record);
        this.selectedRowKeys = index;
      },
      // 触发屏幕自适应
      resetScreenSize() {
        const screenWidth = document.body.clientWidth;
        if (screenWidth < 500) {
          this.scrollTrigger = {
            x: 800
          };
        } else {
          this.scrollTrigger = {};
        }
      },
      getData() {
        this.$nextTick(() => {
          if (this.showFlag) {
            this.showFlag = false;
            this.$post(this.url.getOrgTree).then((res) => {
              // 获取树形第一层级
              this.orgTree = res;
              this.orgTree.forEach((e, index) => {
                this.orgTree[index].title = e.text;
                this.orgTree[index].label = e.text;
                this.orgTree[index].index = index;
                this.orgTree[index].key = e.id;
                this.orgTree[index].levelId = e.levelId;
                this.orgTree[index].key = e.id;
              });
            });
          }
        });
      },
      // 加载树形子级数据
      onLoadData(treeNode) {
        return new Promise((resolve) => {
          // 判断是否有子级
          if (treeNode.dataRef.children) {
            resolve();
            return;
          }
          this.$post(this.url.getTreeListByPid, {
            pid: treeNode.dataRef.id
          })
            .then((res) => {
              const orgTree = res;
              orgTree.forEach((e, index) => {
                orgTree[index].title = e.text;
                orgTree[index].index = index;
                orgTree[index].key = e.id;
                orgTree[index].levelId = e.levelId;
              });
              treeNode.dataRef.children = orgTree;
              this.orgTree = [...this.orgTree];
              resolve();
            })
            .catch((err) => {
              console.log(err);
            });
        });
      },
      // 树形选择事件
      selectTree(value, node, extra) {
        const tree = node.node.dataRef;
        this.queryParam.orgId = tree.id;
        this.queryParamList = Object.assign({}, this.queryParam);
        this.orgName = tree.text;
        this.$refs.table.refresh();
      },
      onSelectChangeResh(changeableRowKeys) {
        console.log('changeableRowKeys',changeableRowKeys);
      },
      onSelectChange(selectedRowKeys, selectedRows) {
        this.selectedRowKeys = selectedRowKeys;
        this.selectedRows = selectedRows;
      },
      toggleAdvanced() {
        this.advanced = !this.advanced;
      },
    },
  };
</script>

<style lang="less" scoped="scoped">
  .t-row.ant-row {
    background: #fff !important;
  }

  .custom-tree {
    /deep/ .ant-menu-item-group-title {
      position: relative;

      &:hover {
        .btn {
          display: block;
        }
      }
    }

    /deep/ .ant-menu-item {
      &:hover {
        .btn {
          display: block;
        }
      }
    }

    /deep/ .btn {
      display: none;
      position: absolute;
      top: 0;
      right: 10px;
      width: 20px;
      height: 40px;
      line-height: 40px;
      z-index: 1050;

      &:hover {
        transform: scale(1.2);
        transition: 0.5s all;
      }
    }
  }
</style>
